<template>
  <van-nav-bar title="退货商品" left-text="" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ info.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="aui-flex">
        <div style="font-size: 16px">退货地址：</div>
        <div class="aui-flex-box">
          <h3 >
            厂家联系人 <em>{{ info.manufacturer.telephone }}</em>
          </h3>
          <p>{{ info.manufacturer.address }}</p>
        </div>
      </div>

      <!-- 评价信息 -->
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="address_text"
            is-link
            readonly
            name="picker"
            label="寄件地址列表"
            placeholder="请选择地址列表"
            @click="showAddressPicker = true"
            :rules="[{ required: true, message: '请选择地址列表' }]"
          />
          <van-popup v-model:show="showAddressPicker" position="bottom">
            <van-picker
              :columns="columnsAddress"
              @confirm="onConfirmAddress"
              @cancel="showAddressPicker = false"
            />
          </van-popup>

          <van-field
            v-model="express_text"
            is-link
            readonly
            name="picker"
            label="物流公司"
            placeholder="请选择物流公司"
            @click="showExpressPicker = true"
            :rules="[{ required: true, message: '请选择物流公司' }]"
          />
          <van-popup v-model:show="showExpressPicker" position="bottom">
            <van-picker
              :columns="columnsExpress"
              @confirm="onConfirmExpress"
              @cancel="showExpressPicker = false"
            />
          </van-popup>
          <van-field
            v-model="expresscode"
            name="expresscode"
            label="快递单号"
            placeholder="请输入快递单号"
            :rules="[{ required: true, message: '请输入快递单号' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </section>
  </section>
</template>
    <script setup>
const route = useRoute();
const router = useRouter();
const { cookies } = useCookies();
const goBack = () => {
  history.back();
};
const orderid = ref(route.query.orderid ?? 0);
const info = ref({
  manufacturer: {},
});
const LoginUser = reactive(cookies.get("LoginUser"));
const address_text = ref("");
const express_text = ref("");
const addressid = ref("");
const expressid = ref("");
const showAddressPicker = ref(false);
const showExpressPicker = ref(false);
const columnsAddress = ref([]);
const columnsExpress = ref([]);
const expresscode = ref("");
onBeforeMount(() => {
  getInfoData();
});
const getInfoData = async () => {
  let result = await Api.business.orderInfo({
    orderid: orderid.value,
    busid: LoginUser.id,
  });
  if (result.code == 1) {
    info.value = result.data;
  }
  let res = await Api.business.orderExpresslist({
    orderid: orderid.value,
    busid: LoginUser.id,
  });
  if (res.code == 1) {
    columnsExpress.value = res.data.expresslist;
    columnsAddress.value = res.data.addresslist;
  }
};
const onConfirmAddress = ({ selectedOptions }) => {
  address_text.value = selectedOptions[0]?.text;
  addressid.value  = selectedOptions[0]?.value;
  showAddressPicker.value = false;
};
const onConfirmExpress = ({ selectedOptions }) => {
  express_text.value = selectedOptions[0]?.text;
  expressid.value = selectedOptions[0]?.value;
  showExpressPicker.value = false;
};
const onSubmit = async () => {
  let data = {
    orderid: orderid.value,
    busid: LoginUser.id,
    expresscode: expresscode.value,
    addressid:addressid.value,
    expressid: expressid.value
  };
  let result = await Api.business.orderRefundgoods(data);
  if (result.code == 1) {
    showSuccessToast({
      message: result.msg,
      onClose: function () {
        goBack();
      },
    });
  } else {
    showFailToast(result.msg);
  }
};
</script>
    <style>
@import url("/assets/css/info.css");
</style>